<template>
  <div class="middle-box" :style="{ 'background-image': `url(${store_screen_9})`}">
      <div style="display: flex;justify-content: center; height: 32vh;align-items: center;">
        <div class="middle-monthly">
          <div class="current-store" style="position: absolute;z-index: 10;color: white;font-size: 2.8vh;width: 28vw;line-height: 2;">
            <div>
              <span class="current-store-val" style="font-size: 3.8vh">当前门店：{{allData.store_name}}</span>
              <div style="display: flex;justify-content: space-between;">
                <span>当日排名：{{allData.sale_ranking_day.store.rank}}</span>
                <span style="margin-right: 2rem">本月排名：{{allData.sale_ranking_month.store.rank}}</span>
              </div>
            </div>
          </div>
          <img class="store-screen-cls" :src="store_screen_2" alt="">
          <img class="store-screen-cl" :src="store_screen_5" alt="">
        </div>
      </div>
      <div style="display: flex;justify-content: space-around;margin: 0 0.5rem;margin-top: 3.8vh;">
        <div class="sales-box">
          <div class="sales-ranking">
            <div style="display: flex;align-items: center;">
              <span class="sales-span"></span>
              <span class="sales-value">本月销售排名（top10）</span>
            </div>
          </div>
          <div class="shop-content">
            <div class="shop-color" :class="index % 2 == 0 ? 'active-shop' : ''" v-for="(item, index) in allData.sale_ranking_month.rank_list">
              <span class="shop-rank">{{ item.rank }}</span>
              <span class="shop-title">{{item.store_name}}</span>
            </div>
          </div>
        </div>
        <div class="sales-box">
          <div class="sales-ranking">
            <div style="display: flex;align-items: center;">
              <span class="sales-span"></span>
              <span class="sales-value">当日门店收入：<span> {{allData.today_income}}</span></span>
            </div>
          </div>
          <div class="shop-content">
            <div class="shop-color" :class="index % 2 == 0 ? 'active-shop' : ''" v-for="(item, index) in allData.today_income_list"
              style="justify-content: space-between;">
              <span class="shop-rank">{{ item.index }}</span>
              <span :style="{'margin-right': item.index == 10 ? '0.4rem' : '',flex: 5.5,'margin-left': '2rem'}">{{item.date}}</span>
              <span style="flex: 2">{{item.price}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  props: {
    allData: {
      type: null,
      default: () => ({})
    },
    ininValue: {
      type: null,
      default: true
    }
  },
  watch: {
    allData(newVal,oldVal){

    }
  },
  data() {
    return {
      store_screen_2:window.location.origin+'/static/local/store-screen/store-screen-02.png',
      store_screen_5:window.location.origin+'/static/local/store-screen/store-screen-05.png',
      store_screen_9:window.location.origin+'/static/local/store-screen/store-screen-09.png',
    };
  },
  mounted() {

  },
  methods: {
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
@media screen and (max-height: 820px) {
  .middle-monthly {
    height: 12vh !important;
  }
}
.middle-box {
  width: 50%;
  // margin-top: 3.8vh;
  // background-image: url('https://dev8.yunzmall.com/static/local/store-screen/store-screen-09.png'); /* 设置图片路径 */
  background-size: 100% 100%; /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  height: 49vh;
  
  .middle-monthly {
    width: 40vw;
    height: 14vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    .middle-monthly-title {
      font-weight: bold;
      font-size: 1rem;
      color: #FFFFFF;
      margin-bottom: 0.4rem;
      z-index: 2;
    }
    .middle-monthly-val {
      font-weight: bold;
      font-size: 1.6rem;
      color: #FFFFFF;
      z-index: 2;
    }
    .store-screen-cls {
      position: absolute;
      z-index: 1;
      width: 45vw;
      height: 18vh;
      // bottom: 33%;
    }
    .store-screen-cl {
      margin: 0;
      position: absolute;
      height: 32vh;
      bottom: -13vh;
      width: 56vw;
    }
  }
  

  .sales-box {
    width: 48%;
    .sales-ranking {
      background: linear-gradient(90deg, #536d8f 0%, rgba(13, 36, 65, 0) 100%);
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 0.8rem;
      color: #ffffff;
      justify-content: space-between;
      .sales-span {
        display: block;
        width: 0.3rem;
        height: 2rem;
        background: linear-gradient(180deg, #2b6dcc 0%, #d6efe7 100%);
        margin-right: 0.45rem;
      }
    }
    .shop-content {
      background: linear-gradient(180deg, #050f27 0%, #0d2441 100%);
      border: 1px solid #536d8f;
      padding: 1rem 0.6rem;
      font-weight: 400;
      font-size: 0.75rem;
      color: #ffffff;
      height: 46.5vh;
      display: flex;
      flex-direction: column;
      .shop-color {
        padding: 0 2.2rem;
        // height: 4.3vh;
        height: 4.65vh;
        display: flex;
        align-items: center;
      }
      .active-shop {
        background: #15223e;
      }
      .shop-rank {
        // line-height: 4.3vh;
      }
      .shop-title {
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis;
        margin: 0 1rem;
        width: 100%;
      }
    }
  }
}
</style>
